<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品页面</title>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <!--全局style-->
    <style>
        body{
            font-size: 12px;
            font-family: Arial;
        }
        a:hover{
            text-decoration: none;
        }
    </style>

    <!--左边悬浮的展示图片样式-->
    <style>
        div.imgAndInfo{
            margin: 40px auto;
            width: 960px;
        }
        div.imgInimgAndInfo{
            width: 400px;
            float: left; /*向左漂浮，这样可以水平摆放，为的是和右边的基本信息保持水平摆放关系。*/
        }
        div.imgAndInfo img.bigImg{
            width: 400px;
            height: 400px;
            padding: 20px;
            border: 1px solid #F2F2F2;
        }
        div.imgAndInfo div.smallImageDiv{
            width: 80%;
            margin: 20px auto;
        }
        div.imgAndInfo img.smallImage{
            width: 60px;
            height: 60px;
            border: 1px solid white;
        }
        div.imgAndInfo img.smallImage:hover{
            border: 2px solid black;
        }
    </style>

    <!--右边产品基本信息、选择购买样式-->
    <style>
        div.infoInimgAndInfo{
            /*float: left;*/
            /*margin-left: 20px;*/

            padding: 0px 20px;
            overflow: hidden; /*隐藏溢出部分。 结合图片div的float:left,就可以做到基本信息div和图片div水平摆放，并且基本信息div自动占用剩下所有的宽度*/
        }
        /*主标题样式*/
        div.infoInimgAndInfo div.productTitle{
            color: black;
            font-size: 16px;
            font-weight: bold;
            margin: 0px 10px;
        }
        /*副标题样式*/
        div.infoInimgAndInfo div.productSubTitle{
            color: #DD2727;
            font-size: 12px;
            margin: 0px 10px;
        }
        /*价格样式*/
        /*聚划算样式*/
        div.infoInimgAndInfo div.juhuasuan{
            background-color: #2DA77A;
            color: white;
            text-align: center;
            line-height: 40px;
            margin-top: 10px;
        }
        div.infoInimgAndInfo span.juhuasuanBig{
            font-size: 18px;
            font-weight: bold;
            font-family: 黑体;
        }
        div.infoInimgAndInfo span.juhuasuanTime{
            color: #FFC057;
            font-weight: bold;
        }
        /*优惠券与价格样式*/
        div.infoInimgAndInfo div.productPriceDiv{
            background-image: url("http://how2j.cn/tmall/img/site/priceBackground.png");
            height: 102px;
            padding: 10px;
            color: #666666;
        }
        div.infoInimgAndInfo div.gouwujuanDiv{
            margin-top: 5px;
        }
        /*原始价*/
        div.infoInimgAndInfo div.originalDiv{
            margin-top: 5px;
        }
        div.infoInimgAndInfo span.originalPriceDesc{
            color: #999999;
            display: inline-block;
            width: 68px;
        }
        div.infoInimgAndInfo span.originalPrice{
            font-family: Arial;
            font-size: 12px;
            color: #333333;
            text-decoration: line-through;
        }
        /*促销价*/
        div.infoInimgAndInfo span.promotionPriceYuan{
            font-family: Arial;
            font-size: 18px;
            color: #C40000;
        }
        div.infoInimgAndInfo span.promotionPrice{
            color: #C40000;
            font-family: Arial;
            font-size: 30px;
            font-weight: bold;
        }
        div.infoInimgAndInfo span.promotionPriceDesc{
            color: #999999;
            display: inline-block;
            width: 68px;
            position: relative;
            left: 0px;
            top: -10px;
        }
        /*销量数与累计评价数*/
        div.infoInimgAndInfo div.productSaleAndReviewNumber{
            margin: 20px 0px;
            border-top: 1px dotted #C9C9C9;
            border-bottom: 1px dotted #C9C9C9;
            padding: 10px;
        }
        div.infoInimgAndInfo div.productSaleAndReviewNumber div{
            display: inline-block;
            width: 49%;
            text-align: center;
            color: #999999;
            font-size: 12px;
        }
        div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
            border-right: 1px solid #E5DFDA;
        }
        /*购买数量与库存*/
        div.infoInimgAndInfo div.productNumber{
            color: #999999;
        }
        div.infoInimgAndInfo span.productNumberSettingSpan{
            border: 1px solid #999;
            display: inline-block;
            width: 43px;
            height: 32px;
            padding-top: 7px; /*上内边距 7px，把input顶下去*/
        }
        div.infoInimgAndInfo input.productNumberSetting{
            border: 0px;
            width: 80%;
            height: 80%;
        }
        /*上下箭头*/
        div.productNumber span.updown img{
            display: inline-block;
            vertical-align: top;
            /*确保垂直向上对齐，因为在不同的浏览器下，img元素可能表现出不贴在上面的现象。 贴在上面之后，再借助其所在span的内边距的padding-top就可以很方便的调整其位置*/
            /*感觉这段没什么用，有没有都一样*/
        }
        div.productNumber span.updown{
            border: 1px solid #999;
            display: block;
            width: 20px;
            height: 14px;
            text-align: center;
            padding-top: 4px;
        }
        div.productNumber span.updownMiddle{
            display: block;
            height: 4px;
        }
        div.productNumber span.arrow{
            display: inline-block;
            width: 22px;
            height: 32px;
            vertical-align: top;
        }
        /*服务承诺*/
        div.serviceCommitment{
            margin: 20px 0px;
        }
        div.infoInimgAndInfo span.serviceCommitmentDesc{
            color: #999999;
        }
        div.infoInimgAndInfo span.serviceCommitmentLink a{
            color: #666666;
        }
        /*购买与加入购物车*/
        div.buyDiv{
            margin: 20px 0px;
            text-align: center;
        }
        div.buyDiv button{
            margin: 0px 10px;
            width: 180px;
            height: 40px;
            display: inline-block;
        }
        /*购买健*/
        div.buyDiv button.buyButton{
            border: 1px solid #C40000;
            background-color: #FFEDED;
            font-size: 16px;
            text-align: center;
            color: #C40000;
            font-family: Arial;
        }
        div.buyDiv button.addCartButton{
            border: 1px solid #C40000;
            background-color: #C40000;
            text-align: center;
            color: white;
            font-size: 16px;
            font-family: Arial;
            line-height: 40px;
        }
        div.buyDiv span.glyphicon-shopping-cart{
            font-size: 12px;
            margin-right: 8px;
        }
        .redColor{
            color: #C40000;
        }
        .boldWord{
            font-weight: bold;
        }
    </style>

    <!--下方商品详情-->
    <style>
        div.productDetailDiv{
            width: 790px;
            margin: 40px auto;
        }
        /*顶端商品详情与累计评价*/
        div.productDetailTopPart{
            border: 1px solid #DFDFDF;
            border-left-width: 0px; /*左边框去掉，因为“商品详情”四个字接下来会用红色边框显示*/
        }
        /*被选中的超链*/
        a.selected{
            border-left: 1px solid #cfbfb1;
            border-right: 1px solid #cfbfb1;
            color: #b10000;
            display: inline-block;
            font-weight: bold;
            line-height: 46px;
            width: 90px;
            text-align: center;
            position: relative;
            /*为的是下一步使用:before新增加的元素做绝对定位。 因为绝对定位是基于定位了的父元素*/
        }
        a.selected:before{
            display: block;
            content: '';
            border: 1px solid #b00000;
            width: 90px; /*刚好和其父元素超链宽度一样*/
            height: 1px;
            position: absolute;
            top: -1px;
            margin-left: -1px;;
        }
        a.selected:after{
            content: '';
            display: block;
            border-color: #b00000 transparent transparent;
            border-width: 5px;
            border-style: solid;
            width: 0px; /*宽度为0才会变成倒三角*/
            height: 0px;
            position: absolute;
            left: 50%;
            top: -1px;
            margin-left: -5px;
        }
        /*累计评价*/
        a.productDetailTopReviewLink{
            color: #333333;
            padding: 0px 20px;
            border-right: 1px dotted #D2D2D2;
        }
        div.productDetailTopPart span.productDetailTopReviewLinkNumber{
            color: #3355B9;
        }
        /*参数列表*/
        div.productParamterPart{
            padding: 40px;
            border: 1px solid #DFDFDF;
        }
        div.productParamter{
            color: #999999;
            font-weight: bold;
            margin-bottom: 20px;
        }
        div.productParamterList span{
            color: #666666;
            display: block;
            width: 220px;
            float: left;
            margin: 8px 0px;
        }
        div.productDetailImagesPart img{
            display: block;
            width: 100%;
            margin: 20px 0px;
        }
    </style>

    <!--下方累计评价内容-->
    <style>
        /*商品详情与累计评价切换栏*/
        div.productReviewDiv{
            width: 790px;
            margin: 40px auto;
        }
        div.productReviewTopPart{
            border: 1px solid #DFDFDF;
        }
        a.productReviewTopPartSelectedLink{
            color: #333333;
            padding: 0px 20px;
        }
        /*评价信息*/
        div.productReviewContentPart{
            padding-top: 50px;
        }
        div.productReviewItem{
            border-bottom: 1px solid #e2e2e3;
            margin: 10px 0px;
        }
        div.productReviewItemDesc{
            display: inline-block;
            width: 80%;
            color: #333333;
            margin: 5px 20px;
            float: left;
        }
        div.productReviewItemDate{
            color: #CCCCCC;
            margin: 15px 0px 0px 0px;
        }
        /*用户名信息*/
        div.productReviewItemUserInfo{
            color: #404040;
            padding: 20px 0px;
            margin: 5px 20px;
        }
        div.productReviewItemUserInfo span.userInfoGrayPart{
            color: #999999;
        }
    </style>
</head>
<body>
<!--上方图片与购买-->
<div class="imgAndInfo">
    <!--左边悬浮的展示图片-->
    <div class="imgInimgAndInfo">
        <img width="100px" class="bigImg" src="http://how2j.cn/tmall/img/productSingle/8619.jpg">
        <div class="smallImageDiv">
            <img width="56px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8620.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8620.jpg">
            <img width="56px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8619.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8619.jpg">
            <img width="56px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8618.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8618.jpg">
            <img width="56px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8617.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8617.jpg">
            <img width="56px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8616.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8616.jpg">
        </div>
    </div>
    <div class="img4load hidden"></div>
    <!--<div style="clear: both;"></div>-->

    <!--右边产品基本信息、选择购买样式-->
    <div class="infoInimgAndInfo">
        <!--产品标题-->
        <div class="productTitle">名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女</div>
        <!--产品副标题-->
        <div class="productSubTitle">高端定制 高档棉麻 现货即发 加购物车 领优惠卷</div>
        <!--聚划算价格div块-->
        <div class="productPrice">
            <div class="juhuasuan">
                <span class="juhuasuanBig">聚划算</span>
                <span>
                    此商品即将参加聚划算，
                    <span class="juhuasuanTime">1天19小时</span>
                    后开始
                </span>
            </div>
            <div class="productPriceDiv">
                <div class="gouwujuanDiv">
                    <img height="16px" src="http://how2j.cn/tmall/img/site/gouwujuan.png">
                    <span>全天猫实物商品通用</span>
                </div>
                <div class="originalDiv">
                    <span class="originalPriceDesc">价格</span>
                    <span class="originalPriceYuan">¥</span>
                    <span class="originalPrice">399.0</span>
                </div>
                <div class="promotionDiv">
                    <span class="promotionPriceDesc">促销价</span>
                    <span class="promotionPriceYuan">¥</span>
                    <span class="promotionPrice">379.05</span>
                </div>
            </div>
        </div>
        <!--销量与评价数目-->
        <div class="productSaleAndReviewNumber">
            <div>销量 <span class="redColor boldWord"> 50</span></div>
            <div>累计评价 <span class="redColor boldWord"> 19</span></div>
        </div>
        <!--购买数量与库存-->
        <div class="productNumber">
            <span>数量</span>
            <span>
                <span class="productNumberSettingSpan">
                    <input type="text" value="1" class="productNumberSetting">
                </span>
                <span class="arrow">
                    <a class="increaseNumber" href="#nowhere">
                        <span class="updown"><img src="http://how2j.cn/tmall/img/site/increase.png"></span>
                    </a>
                    <span class="updownMiddle"> </span>
                    <a class="updownNumber" href="#nowhere">
                        <span class="updown"><img src="http://how2j.cn/tmall/img/site/decrease.png"></span>
                    </a>
                </span>
                件
            </span>
            <span>库存66件</span>
        </div>
        <!--服务保障-->
        <div class="serviceCommitment">
            <span class="serviceCommitmentDesc">服务承诺</span>
            <span class="serviceCommitmentLink">
                <a href="#nowhere">正品保证</a>
                <a href="#nowhere">极速退款</a>
                <a href="#nowhere">赠运费险</a>
                <a href="#nowhere">七天无理由退换</a>
            </span>
        </div>
        <!--购买与加入购物车-->
        <div class="buyDiv">
            <a href="#nowhere" class="buyLink">
                <button class="buyButton">立即购买</button>
            </a>
            <a class="addCartLink" href="#nowhere">
                <button class="addCartButton">
                    <span class="glyphicon glyphicon-shopping-cart"></span>加入购物车
                </button>
            </a>
        </div>
    </div>
</div>
<div style="clear: both;"></div>

<!--下方商品详情-->
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
            <span>材质成分:  聚酯纤维100% </span>
            <span>品牌:  Emyche/艾米秋 </span>
            <span>货号:  129668 </span>
            <span>尺码:  L M S XL X </span>
            <span>上市年份季节:  2016年夏季 </span>
            <span>颜色分类:  白色 黑色 浅蓝 </span>
            <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
        <img src="http://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>
<!--下方累计评价内容-->
<div class="productReviewDiv" style="display: block;">
    <div class="productReviewTopPart">
        <a class="productReviewTopPartSelectedLink" href="#nowhere">商品详情</a>
        <a class="selected" href="#nowhere">累计评价 <span class="productReviewTopReviewLinkNumber">19</span> </a>
    </div>
    <!--评论内容-->
    <div class="productReviewContentPart">
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    不错的购物，包装很精细，布料也不错舒服，因为之前一直购买品牌装，很好的一次网购，生完宝宝刚刚一个多月我一百五十斤穿2XL不错
                </div>
                <div class="productReviewItemDate">2016-08-10</div>
            </div>
            <div class="productReviewItemUserInfo">
                哀****莉<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    面料很好，大小也刚刚好，本来买之前还担心，犹豫，等货到了，比我心中想象的好很多，大家放心购买，很满意的购物，以后还会来??
                </div>
                <div class="productReviewItemDate">2016-08-23</div>
            </div>
            <div class="productReviewItemUserInfo">
                贤*闲<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    <span>商品：</span>宝贝料子和手感都不错，是值这价，卖家很贴心的送了内衣带，5分好评是必须的。喜欢的可以 下手了
                </div>
                <div class="productReviewItemDate">2016-08-16</div>
            </div>
            <div class="productReviewItemUserInfo">
                孤*****爱<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    衣服收到了，给朋友买的，真心不错，料子也特别好，穿起来特别有气质，跟模特穿的效果差不多。。。好评，好评
                </div>
                <div class="productReviewItemDate">2016-08-19</div>
            </div>
            <div class="productReviewItemUserInfo">
                哀****莉<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    衣服不错，手感不错，试穿很有型，真心的喜欢，谢谢老板
                </div>
                <div class="productReviewItemDate">2016-07-19</div>
            </div>
            <div class="productReviewItemUserInfo">
                孤*****爱<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    喜欢(⊙o⊙)哦，美美哒，值得一试！！！宽松雪纺，很舒服
                </div>
                <div class="productReviewItemDate">2016-08-10</div>
            </div>
            <div class="productReviewItemUserInfo">
                这****0<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    衣服已经收到，大小很合适，面料也可以，就是感觉衣服面料有一点厚，其他都还不错，款式也好看，希望店家多出一点新款，以后回来光顾你们。?
                </div>
                <div class="productReviewItemDate">2016-07-10</div>
            </div>
            <div class="productReviewItemUserInfo">
                y****心<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    很漂亮的衣服，料子有垂感，我很满意，老公也说好呢
                </div>
                <div class="productReviewItemDate">2016-07-27</div>
            </div>
            <div class="productReviewItemUserInfo">
                阿*丶<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    真不错，已经迫不及待的穿上了，朋友们都说好，挺有气质的，就是上衣稍微有点肥，不过肉肉被藏起来了！有看上的赶紧下单吧！
                </div>
                <div class="productReviewItemDate">2016-08-12</div>
            </div>
            <div class="productReviewItemUserInfo">
                名*****_<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    质量是真的不错，适合个子高一点的美眉穿，很漂亮?
                </div>
                <div class="productReviewItemDate">2016-08-03</div>
            </div>
            <div class="productReviewItemUserInfo">
                安**°<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    再买的时候纠结了好久，最后还是选择在这里购买，一次满意的网购，让我对网购有了希望，或刚收到，因觉得物超所值，就迫不及待拍了照片，那个玻璃的声音非常脆，我个人觉得挺好的，值得拥有！
                </div>
                <div class="productReviewItemDate">2016-08-08</div>
            </div>
            <div class="productReviewItemUserInfo">
                这****0<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    <span>服务：</span>不错
                </div>
                <div class="productReviewItemDate">2016-08-20</div>
            </div>
            <div class="productReviewItemUserInfo">
                醉**心<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    强烈推荐，我的天，质量也太好了，让我情何以堪，大爱啊。说说我的体格吧，162.105斤，腰围大概是22，穿m码刚刚好。快递那么快，特地跟店家说10号要外出店家也尽心备注的很好。真的特别感动，我收藏店铺了，下次还来你们家。衣服比雪纺舒服，薄薄的，现在穿刚好，我配了高跟鞋和小白鞋都很完美。店家还送了无痕肩带，真的太细心了，给一百个好评，赞。衣服我看了没有线头，薄薄的。不说了，我赶紧发给我姐让她看看。
                </div>
                <div class="productReviewItemDate">2016-08-17</div>
            </div>
            <div class="productReviewItemUserInfo">
                安**°<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    此用户没有填写评论！
                </div>
                <div class="productReviewItemDate">2016-07-21</div>
            </div>
            <div class="productReviewItemUserInfo">
                乱**型<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    衣服质量真心不错很厚实，上身效果很棒哦，穿起来很舒服，很洋气。价格也很合理……赞赞赞
                </div>
                <div class="productReviewItemDate">2016-08-19</div>
            </div>
            <div class="productReviewItemUserInfo">
                丶***眠<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    衣服裤子都很合身，同事笑我说这是我买得最好看最时尚的一套衣服，衣服上身效果也不错，很是满意，还送了隐形带，正好用上，质量很好穿着凉快，唯一不足的就是洗了后需要烫一下才不皱，不过不影响衣服的美，很满意。上传两张没P的照片
                </div>
                <div class="productReviewItemDate">2016-08-08</div>
            </div>
            <div class="productReviewItemUserInfo">
                乱**型<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    不好意思好久才来评价  质量好  上身效果好  主要有胖子穿的漂亮衣服啦   赞赞赞
                </div>
                <div class="productReviewItemDate">2016-07-11</div>
            </div>
            <div class="productReviewItemUserInfo">
                l******1<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    网购以来为数不多的质量好到超乎意料，穿上特别舒服，大小也正合适，超赞！这个店里值得好好逛逛！
                </div>
                <div class="productReviewItemDate">2016-07-10</div>
            </div>
            <div class="productReviewItemUserInfo">
                盗**记<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="productReviewItem">
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    宝贝面料很舒服，一字领也非常美，说实话是充上衣买的！犹豫了很长时间才下定决心的，很喜欢，很满意！喜欢就是最值的！
                </div>
                <div class="productReviewItemDate">2016-07-24</div>
            </div>
            <div class="productReviewItemUserInfo">
                贤*闲<span class="userInfoGrayPart">（匿名）</span>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div>
</body>

<!--显示缩略图效果-->
<script>
    $(function () {
        var initBigImg = false;
        $("img.smallImage").mouseenter(function () {
            var bigImageURL = $(this).attr("bigImageURL");
            $("img.bigImg").attr("src", bigImageURL);

            $("img.smallImage").each(function () {
                $(this).css("border-color", "white");
            });
            $(this).css("border-color", "black");
        });

        //图片预加载，在浏览器加载该页面时把所有大图都加载完毕，而不是等鼠标移上去后再让大图去找服务器要图
        //load是该选择器在加载新图片时就会自动调用的jquery函数
        $("img.bigimg").load(function () {
            if(initBigImg){
                return;
            }
            $("img.smallImage").each(function () {
                var bigImageURL = $(this).attr("bigImageURL");
                var img = new Image();
                img.src = bigImageURL;
                img.onload = function () {
//                    console.log(bigImageURL)
                    $("img.img4load").append(img);
                };
            });
            initBigImg = true;
        });
    });
</script>
<!--修改价格js代码-->
<script>
    var stock = 66;
    $(function () {
       $("input.productNumberSetting").keyup(function () {
           var num = $(this).val();
           num = parseInt(num);
           if(isNaN(num)){
               num = 1;
           }
           if(num <= 0){
               num = 1;
           }
           if(num > stock){
               num = stock;
           }
           $(this).val(num);
       });

       $("a.increaseNumber").click(function () {
           var num = $("input.productNumberSetting").val();
           num ++;
           if(num > stock){
               num = stock;
           }
           $("input.productNumberSetting").val(num);
       });
        $("a.updownNumber").click(function () {
            var num = $("input.productNumberSetting").val();
            num --;
            if(num <= 0){
                num = 1;
            }
            $("input.productNumberSetting").val(num);
        });
    });
</script>
<!--切换商品详情和累计评价-->
<script>
    $(function () {
        $("div.productReviewDiv").hide();
        $("a.productDetailTopReviewLink").click(function () {
            $("div.productDetailDiv").hide();
            $("div.productReviewDiv").show();
        });
        $("a.productReviewTopPartSelectedLink").click(function () {
            $("div.productReviewDiv").hide();
            $("div.productDetailDiv").show();
        });
    });
</script>
</html>